<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>第五课 元素属性与效果</title>
    <style>
        #div1{
            background: orange;
            /* display: none; */
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <!-- <input type="text" /> -->
    <!-- <select name="" id="select1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select> -->
    <div id="div1">星星课堂</div>
    <button id="btn1">按钮1</button>
    <script>
        // var input1 = $('input');
        // input1.val('星星课堂真好');
        // console.log(input1.val());
        // var $select1 = $('#select1');
        // $select1.val('2');
        // console.log($select1.val());
        var $div1 = $('#div1');
        var $btn1 = $('#btn1');
        $btn1.on('click',function(){
            $div1.toggle();
        })
        // $div1.show(2000,'swing',function(){
        //     console.log('div1显示成功');
        // });
        // $div1.hide(2000);
    </script>
</body>

</html>